<template>
	<view :class="showHeader?'content':''">
		<view class="device-header" v-if="showHeader">
			<view class="device-info">
				<image class="device-img" :src="device.devicePic" mode="aspectFit"></image>
				<view class="">
					<view class="deviceName">
						{{device.deviceName}}
					</view>
					<view style="color: #aaa;" class="">
						{{device.roomName?device.roomName:' '}}
					</view>
				</view>
			</view>
			<view class="operation">
				<view style="display: flex;" class="">
					<image class="operation-img" v-for="(item,index) in sheetList" :key="index" style="margin-left: 5px;"
						@click="showCloudStorge(device)" :src="item" mode="" />
				</view>
				<view @click="onPopup(device)" class="moreView">
					<image class="operation-img" style="margin-left: 5px;"
						:src="'https://statics.xmcsrv.net/weixin/device/more.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="dook-info">
			<view class="dook-content">
				<view class="dook-wifi">
					<image class="wifi-img" style="" :src="wifiUrl" mode="" />
					 <view class="scrolling-div" id="scrollingDivId">
					   <view :class="scrolling?'scrolling-content':''" class="wifiName" id="scrollingId">
					     {{wifiName}}
					   </view>
					 </view>
				</view>
				<view class="dook-video" @click="toLive" :class="lockStatus">
					<image class="pviewImg "
					    style="width: 100%;height: 100%;"
						:src="previewPic" mode=""
						v-show="imgLoaded"
						@load="onSuccessImg(previewPic)"
						@error="imageError($event, -1)" />
					<image class="pviewImg" 
					    style="width: 100%;height: 100%;"
					    v-show="!imgLoaded" 
					    :src="defaultpreviewPic" />
					<image class="replay" :src="lockStatus == 'deep' ?
						deepSleep:lockStatus == 'OffLine' ?
						offLine:lockStatus == 'sleeping' ?
						sleeping:replay" mode="">
					</image>
				</view>
				<view class="dook-cell">
					<view class="electric">
						<image v-if="device.interEnable" @click.stop="oninterEnable" src="https://statics.xmcsrv.net/weixin/device/rpsAbnormal.png" style="width: 44rpx; height: 44rpx;margin-right: 8px;"></image>
						<j-electric v-if="isbatteryPower" :zIndex="0" :ElectricQuantity="bl > 0 ? bl : 0" />
					</view>
					<view v-if="true" class="msgSetting" @click="msgSetting">
						<image class="cell-img" :src="'https://statics.xmcsrv.net/weixin/device/msgsetIcon.png'" mode=""></image>
						<view class="">
							消息联动
						</view>
					</view>
					<view v-if="setting" class="msgSetting" @click="onSetting">
						<image class="cell-img" :src="'https://statics.xmcsrv.net/weixin/device/setting2.png'" mode=""></image>
						<view class="">
							设置
						</view>
					</view>
				</view>
			</view>
			<view class="dook-opt">
				<view v-if="isTemporary &&appletIdentify!=generalIdentify" class="list temporary" @click="tempPwdClick">
					<img class="img" :src="temporaryUrl" alt="">
					<view class="">
						临时密码
					</view>
				</view>
				<view v-if="isContactFamily" class="list temporary" :class="lockStatus == 'deep'|| lockStatus == 'sleeping' || lockStatus == 'OffLine' ?'unlocking':''" @click="contactFamily">
					<img class="img" src="https://statics.xmcsrv.net/weixin/device/contact.png" alt="">
					<view class="">
						联系家人
					</view>
				</view>
				<view v-if="isManualUnlocking"
					:class="lockStatus == 'deep'|| lockStatus == 'sleeping' || lockStatus == 'OffLine' ?'unlocking':''"
					class="list" @click="unlockClick()">
					<img class="img" :src="unlockUrl" alt="">
					<view class="">
						手动开锁
					</view>
				</view>
			</view>
		</view>
		<view class="swiper" v-if="isSwiper == 'show'">
			<uni-swiper-dot  class="uni-swiper-dot-box" :info="openInfo" :current="swiperDotIndex"
				:mode="mode" field="content">
				<swiper autoplay="true" class="swiper-box" @change="swiperChange" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in openInfo" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<image class="swiper-item-image" @click="toPath(item)" :src="item.url" mode=""></image>
							<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="closeSwiper">
				<uni-icons color="#BFBFBF" @click="closeSwiper()" type="clear" size="30"></uni-icons>
			</view>
		</view>
		<view class="lockInfo" :style="{height:infoHight+'px'}">
			<template v-if="isSupportUserManager">
				 <uni-segmented-control :current="currentIndex" :values="tabArr" @clickItem="onTabClickItem" styleType="text" activeColor="#FF0025"></uni-segmented-control>
			</template>
			<view v-else style="text-align: center;">
				<text class="htext">通知消息</text>
			</view>
			<view v-show="currentIndex == 1" class="">
				<scroll-view scroll-y="true" :style="{height: infoScrollHight+'px'}">
					<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;display: flex;width: 100%;">
						<template v-for="(item ,index) in userTypeList"> 
							<view class="grid" style="width: 33.33%;" v-if="item.show" :index="index" :key="index"  @click="gridChange(item)">
								<image class="icon" :src="item.icon" mode="aspectFill" />
								<view class="text">{{item.title}}</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
			<scroll-view v-show="currentIndex == 0" id="stepId" class="lockInfo-scroll" :style="{height: infoScrollHight+'px'}" scroll-y
				style="width: 100%;" :refresher-enabled="true" refresher-background="#fff"
				:refresher-triggered="triggered" @scrolltolower='scrolltolower' @refresherrefresh="onRefresh">
				<view v-if="sourceList.length>0" class="list" v-for="(item,index) in sourceList" :key="index"
					@click="itemClick(item,index)">
					<view class="listRight">
						<img class="img" :src="item.AlarmMsgIcon" alt="">
						<view class="text">
							<view class="text1">
								{{item.AlarmTime}}
							</view>
							<view class="text2">
								{{item.totalDesc}}
							</view>
						</view>
					</view>
					<view v-show="item.PicInfo" class="listImg">
						<image class="pic" :style="{border:item.PicInfo.Url?'border: 2px solid #ddd':'none'}" :src="item.PicInfo?item.PicInfo.Url:''"
							@error="imageError($event, index)" />
						<view v-if="index == 0" class="">
							<view v-if="isCountDown" class="playtext">
								<j-pie ref="jPie" :number_value="number_value" :PieStyle="PieStyle" :PieText="count"></j-pie>
							</view>
							<image v-if="item.VideoInfo && !isCountDown " class="play" :src="playUrl" mode="" />
						</view>
						<view v-else class="">
							<image v-if="item.VideoInfo" class="play" :src="playUrl" mode="" />
						</view>
					</view>
				</view>
				<view v-if="sourceList.length == 0 && emptyFlag == 1" class="noMessage">
					<image class="noMessage-img" :src="noMessageUrl" />
					<view class="">
						暂无通知消息
					</view>
				</view>
			</scroll-view>
			<view v-if="sourceList.length>0" class="view-model">
				<view @click="toCloudMsg" class="button">
					更多消息
				</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<view class="form">
				<view class="u-f-ajc title">是否打开门锁？</view>
				<view class="u-f-r form-item">
					<view class="u-f-ajc cancel" @click="cancel">取消</view>
					<view class="u-f-ajc conf" @click="confimeUnlock">确认</view>
				</view>
			</view>
		</uni-popup>
        <j-modal
            :value="showModal"
            :maskCloseAble="false"
            title="提示"
            okText="确定"
            cancelText="帮助"
            @ok="onOk"
            @cancel="onCancel"
        >
            <template slot="content">
                <view class="modal-box">
                    <view v-for="(item, index) in statusList" :key="index" class="bg" :class="lockStatus == item.status? 'status-act' : ''">
                        <view class="image-box">
                            <image class="image-icon" :src="item.imgUrl" />
                        </view>
                        <view class="image-text">
                            <text>{{ item.text }}</text>
                        </view>
                    </view>
                </view>
            </template>
        </j-modal>
		<j-modal :value="startDialog" :showCancel="false" :showConfirm="false">
			<view slot="title" class="flex align-center justify-between j-modal-title">
				<view style="width: 30%;" class=""></view>
				<view style="width: 30%;" class="hint">提示</view>
				<view style="width: 30%;text-align: end;" class="">
					<!-- <uni-icons @click="clearstart2Timer" type="closeempty" size="25"/> -->
				</view>
			</view>
			<view slot="content" class="popupCont">
				<image class="bannerImg" src="https://statics.xmcsrv.net/weixin/operatingLock.png" mode="widthFix"/>
				<view class="">请在门锁上按"8#"进入远程设置模式</view>
				<!-- <view class="countDown">{{start2countDown}}s</view> -->
			</view>
		</j-modal>
		<j-modal :value="abnormalModal" okText="帮助" cancelText="取消" title="提示" @cancel="cancelAbnormal" @ok="onJumpToHelp">
			<view slot="content" class="popupCont">
				<image src="https://statics.xmcsrv.net/weixin/device/wifiAbnormal.png" mode="widthFix" style="width: 60%;height: auto;"/>
				<view class="">
					设备访问外网异常,
				</view>
				<view class="">
					请检查路由器设置
				</view>
			</view>
		</j-modal>
	</view>
</template>

<script>
	import logins from '@/utils/loginApi.js'
	const { handleLogin } = logins();
	import {
		lockHomeMixins
	} from './mixins/lockHome.js'
	let constant = getApp().globalData.constant;
	let EE_DEV_SMARTDOORLOCK3 = constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK3;
	let EE_DEV_SMARTDOORLOCK8 = constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK8;
	const {
		getBeforeDay,
		getStatus
	} = require('@/utils/util.js');
	import {
		GeneralAlarmMsg,
		AlarmMsg
	} from '@/utils/alarmMsg.js'
	export default {
		mixins: [lockHomeMixins],
		props: {
			// 设备信息
			device: {
				type: Object,
				default: {}
			},
			// header是否展示设备
			showHeader: {
				type: Boolean,
				default: false
			},
			setting:{
				type: Boolean,
				default: false
			},
			isTab:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				scrolling:false,
                statusList: [
                    {
                        status: 'online',
                        imgUrl: 'https://statics.xmcsrv.net/weixin/live/status/online.png',
                        text: '当前设备在线，可直接点击访问。'
                    },
                    {
                        status: 'sleeping',
                        imgUrl: 'https://statics.xmcsrv.net/weixin/live/status/lightSleep.png',
                        text: '当前设备准备休眠，需稍后唤醒设备再访问。'
                    },
                    {
                        status: 'dormancy',
                        imgUrl: 'https://statics.xmcsrv.net/weixin/live/status/lightSleep.png',
                        text: '当前设备已进入休眠，请唤醒设备再访问。'
                    },
                    {
                        status: 'deep',
                        imgUrl: 'https://statics.xmcsrv.net/weixin/live/status/deepSleep.png',
                        text: '当前设备已进入深度休眠，请在门锁上按门铃键后在访问。'
                    },
                    {
                        status: 'OffLine',
                        imgUrl: 'https://statics.xmcsrv.net/weixin/live/status/offLine.png',
                        text: '当前设备已离线，请检查网络状态。'
                    },
                ],
			}
		},
		watch: {
			wifiName(val) {
				this.$nextTick(()=>{
					this.getDom()
				})
			}
		},
		mounted() {
			uni.$on('onWebsocketMessage', this.getUiMqttInfoCallback)
			uni.$on('onAlarmEventMessage', (res) => {
				this.AlarmEventInfo(res);
			})
			uni.$on('refreshSize', (res) => {
				this.getClineHeight() //获取可视区域高度
			})
			uni.$on('editMsgNickname', () => { //消息事件修改名称监听事件
				this.getMsgName()
			})
			uni.$on('deleteCloudMsg',()=>{ //消息事件删除消息后监听
				this.getMsgName()
			})
            uni.$on('cancelSubscribe', res => {
                const pages = getCurrentPages()
                const nowPage = pages.pop()
				// console.log('nowpage====',nowPage,pages,this.device,res);
                if(nowPage.route.includes('/doorLockHome') && res == this.device.deviceNo) {
                    uni.switchTab({
                        url: '/jvss/pages/device/home'
                    })
                }
            })
			this.lockStatus = getStatus(this.device.status); // 设备状态
			this.wifiName = uni.getStorageSync(this.device.deviceNo).wifiName?uni.getStorageSync(this.device.deviceNo).wifiName:'';
			this.wifiUrl = uni.getStorageSync(this.device.deviceNo).wifiSignal?uni.getStorageSync(this.device.deviceNo).wifiSignal:'https://statics.xmcsrv.net/weixin/wifi/wifiTwoError.png';
			this.shortcut()
			this.getReqCaps()
			this.getDeviceTypePropListByPageForApp(); //获取设备属性列表
			// this.getXmc() //判断是否有云服务和云电话
			let currentDate = new Date().toJSON().split('T')[0]
			this.startTime = getBeforeDay(-6) + ' ' + '00:00:00'
			this.endTime = getBeforeDay(0) + ' ' + '23:59:59'
			if (this.device.pid == EE_DEV_SMARTDOORLOCK3 || this.device.pid == EE_DEV_SMARTDOORLOCK8) {
				this.jsonAlarmMsg = AlarmMsg
			} else {
				this.jsonAlarmMsg = GeneralAlarmMsg
			}
			this.getMsgName()
			handleLogin(()=>{})
			this.getTailoredConfig()
		},
		onPageShow() {
			this.shortcut()
			if(this.device){
				this.getDeviceTypePropListByPageForApp(); //获取设备属性列表
				this.getReqCaps()
				// this.getMsgName()
                this.AlarmTime = this.sourceList.length ? this.sourceList[0].AlarmTime : null // 展示页面刷新报警图片
                if (!(this.type == 2 && this.deviceList.length == 0)) {
                    this.getMsgList()
                }
			}
		},
		destroyed() {
		    uni.$off('onWebsocketMessage', this.getUiMqttInfoCallback)
		},
		methods: {
			oninterEnable(){
				this.abnormalModal = true;	
			},
			getDom(){
				let width;
				let childrenWidth;
				const query = uni.createSelectorQuery().in(this);
                query.selectAll('#scrollingDivId,#scrollingId').boundingClientRect(data => {
					if(data){
						if(data[1].width >= data[0].width){
							this.scrolling = true
						}
					} 
                }).exec();
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #fff;
		border-radius: 30rpx;
		width: 96%;
		margin: auto;

		.device-header {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			align-items: center;
			.device-img {
				width: 60rpx;
				height: 60rpx;
			}

			.device-info {
				display: flex;
				align-items: center;
				font-size: 20rpx;
			}

			.deviceName {
				font-weight: bold;
				font-size: 24rpx;
			}
		}

		.operation {
			display: flex;
			.operation-img {
				width: 45rpx;
				height: 45rpx;
			}
			.moreView{
				width: 70rpx;
			}
		}
	}

	.dook-info {
		overflow: hidden;

		.dook-content {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.dook-video {
				width: 240rpx;
				height: 346rpx;
				border: 10rpx solid #FF0025;
				border-radius: 17rpx;
				padding: 2rpx;
				position: relative;

				.replay {
					position: absolute;
					width: 80rpx;
					height: 80rpx;
					top: 50%;
					margin-top: -40rpx;
					left: 50%;
					margin-left: -40rpx;
				}

				.pviewImg {
					border-radius: 8rpx;
				}
			}

			.dook-wifi,
			.dook-cell {
				width: calc((100% - 270rpx) / 2);
				text-align: center;
			}
			
			.dook-cell {
				.cell-img {
					margin-right: 10rpx;
				}
			}

			.dook-wifi {
				display: flex;
				justify-content: flex-start;
				.wifi-img{
					width: 45rpx;
					height: 45rpx;
					margin: 0 10rpx 0 20rpx;
					flex-shrink: 0;
				}
			}

			.wifiName {
				height: 45rpx;
				line-height: 45rpx;
				font-size: 18rpx;
				color: #333;
				display: inline-block;
			}
			.scrolling-div {
			  min-width: calc(100% - 80rpx);
			  overflow: hidden;
			  text-align: left;
			}
			
			.scrolling-content {
			  white-space: nowrap;
			  animation: scroll 6s linear infinite;
			  display: inline-block;
			  overflow: hidden;
			  animation-timing-function: linear;
			}
			
			@keyframes scroll {
			  0% {
			    transform: translateX(30%); /* 初始位置：内容向右移动一个宽度 */
			  }
			  100% {
			    transform: translateX(-100%); /* 终止位置：内容向左移动一个宽度 */
			  }
			}

			.electric {
				display: flex;
				justify-content: flex-end;
				margin: 5rpx 30rpx 0 0;
				min-height: 20rpx;
				align-items: center;
			}

			.msgSetting {
				margin-top: 30rpx;
				height: 45rpx;
				background: #FF0025;
				border-radius: 23rpx 0rpx 0rpx 23rpx;
				font-size: 25rpx;
				color: #fff;
				display: flex;
				align-items: center;
				float: right;
				padding: 0 10rpx;

				.cell-img {
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
			}
		}

		.dook-opt {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;

			.list {
				display: flex;
				width: 236rpx;
				height: 60rpx;
				background: #FF0025;
				border-radius: 40rpx;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin: 0 20rpx;
				font-size: 26rpx;
			}

			.unlocking {
				background: #aaa;
			}

			.img {
				width: 38rpx;
				height: 38rpx;
				margin-right: 30rpx;
			}
		}
	}

	.swiper {
		position: relative;
		margin-top: 20rpx;

		/deep/.uni-swiper__warp {
			width: 94%;
			height: 140rpx;
			margin: 20rpx auto;
			border-radius: 15rpx;
		}

		/deep/.swiper-box {
			width: 96%;
			height: 130rpx;
			margin: auto;

			.swiper-item-image {
				width: 100%;
				height: 130rpx;
			}
		}

		.closeSwiper {
			position: absolute;
			top: 2rpx;
			right: 20rpx;
		}
	}

	.view-model {
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		padding: 6rpx;
		box-sizing: border-box;

		.button {
			height: 40rpx;
			border-radius: 34rpx;
			border: 1px solid #FF0025;
			font-size: 20rpx;
			color: #FF0025;
			line-height: 40rpx;
			padding: 0 20rpx;
			letter-spacing: 2px;
		}
	}

	.lockInfo {
		height: unset;
		transition: all 0.3s linear;
		will-change: height;
		width: 96%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 0rpx 10rpx 0 10rpx;
		position: relative;
		overflow: hidden;

		.htext {
			display: block;
			font-weight: bold;
			padding: 0 10rpx;
			height: 70rpx;
			line-height: 70rpx;
		}

		.lockInfo-more {
			font-size: 26rpx;
			font-weight: 400;
			color: #FF0025;
		}

		.lockInfo-scroll ::-webkit-scrollbar {
            display: block;
			width: 5rpx !important;
			height: 5rpx !important;
			-webkit-appearance: auto !important;
			background: transparent;
			overflow: auto !important;
		}

		.lockInfo-scroll ::-webkit-scrollbar-thumb {
			border-radius: 5rpx !important;
			background-color: #666 !important;
		}

		.lockInfo-scroll ::-webkit-scrollbar-track {
			border-radius: 5rpx !important;
			background-color: transparent !important;
		}

		.lockInfo-scroll {
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;

			.list {
				height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				margin: 0 20rpx;
			}

			.listRight {
				display: flex;
				align-items: center;

				.img {
					width: 52rpx;
					height: 52rpx;
					margin-right: 20rpx;
					border-radius: 24rpx;
				}

				.text1 {
					font-size: 22rpx;
					color: #6A6A6A;
				}

				.text2 {
					font-size: 24rpx;
					color: #FF0025;
				}
			}

			.listImg {
				position: relative;
				pointer-events: none;

				.pic {
					width: 54rpx;
					height: 76rpx;
					border-radius: 8rpx;
					display: block;
					border: 2px solid #ddd;
				}

				.play {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					pointer-events: none;
					top: 20rpx;
					left: 12rpx;
				}

				.playtext {
					position: absolute;
					pointer-events: none;
					top: 20rpx;
					left: 5rpx;
				}
			}

			.noMessage {
				text-align: center;
				color: #89AAA8;
				height: 100%;

				.noMessage-img {
					margin-top: 50rpx;
					width: 200rpx;
					height: 210rpx;
				}
			}
		}
	}

	.online {
		border-color: #FF0025 !important;
	}

	.dormancy {
		border-color: #ee9002 !important;
	}

	.deep {
		border-color: #80a7c8 !important;
	}

	.sleeping {
		border-color: #9370d8 !important;
	}

	.OffLine {
		border-color: #ccc !important;
	}

	/deep/.uni-navbar__header-container {
		align-items: center;
	}

	/deep/.dataPopup {
		z-index: 11;
	}

	.form {
		background: white;
		padding: 40rpx 40rpx;
		border-radius: 40rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 49rpx;
			color: #464646;
		}

		.form-item {
			margin-top: 80rpx;

			.cancel {
				background: #F6F7FB;
				color: #000000;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}

			.conf {
				margin-left: 20rpx;
				background: #FF0025;
				color: #ffffff;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}
		}
	}
    .modal-box {
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: center;
        .bg {
            width: 100%;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 20rpx;
            color: #ccc;
            .image-box{
                width: 23px;
                height: 23px;
                min-width: 23px;
                min-height: 23px;
                margin-right: 20px;
                .image-icon {
                    width: 100%;
                    height: 100%;
                }
            }
            .image-text {
                word-wrap: break-word;
                text-align: left;
                width: 430rpx;
            }

        }
        .status-act {
            color: #000;
        }
    }
	.grid{
		padding: 20rpx 0;
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		.icon{
			width: 25px;
			height: 25px;
		}
		.text {
			font-size: 13px;
			margin-top: 5px;
			color: #999999;
		}
	}
	.popupCont{
		.countDown{
			font-size: 30rpx;
			font-weight: bold;
			color: #FF0025;
		}
	}
	.bannerImg{
		width: 80%;
		height: auto;
	}
</style>
